<template>
  <view class="basic-guess">

    <view class="guess-title">
      <text class="guess-text">猜你喜欢</text>
    </view>
    <view class="guess-container">
      <navigator  v-for="item in guessList" :key="item.id"
        :url="`/pages/goods/index?id=${item.id}`"
        open-type="navigate"
        hover-class="none"  class="guess-item"
      >
      <view>
        <image
          :src="item.picture"
          mode="scaleToFill"
        />

        <view class="product-name ellipsis-2 " >
          {{item.name}}
        </view>
        <view class="product-price-container">
          <text class="price-unit">￥</text>
          <text class="product-price">{{item.price}}</text>
        </view>
      </view>
      </navigator>
      
    </view>

    <view class="loading-text">
      {{ finish?'没有更多数据了...':'加载中...' }}
    </view>

  </view>
</template>

<script setup lang="ts">
import { getGuessHttp } from '@/services/homeService';
import type { PageParamsType } from '@/types/global';
import type { GuessItem } from '@/types/home';
import { onMounted,ref } from 'vue';

const guessList = ref<GuessItem[]>([])
const pageParams: Required<PageParamsType> = {
  page:32, // 1 30 测试可以从30页开始！！！
  pageSize:10,
}
// 停止加载更多的标记。
const finish = ref(false)
const getGuessList = async ()=>{

  if(finish.value){
    // 
    uni.showToast({
      icon:'none',
      title:'已经没有更多数据了~'
    })
    return false
  }
 let res = await getGuessHttp(pageParams)
 console.log('猜你喜欢res:',res);
 // 直接替换list
 //  guessList.value = res.result?.items||[]

 // 追加list
 guessList.value.push(...res.result?.items)
 if(pageParams.page < res.result.pages){
   pageParams.page++
 }else{
  finish.value = true
 }
 
}

// 重置数据，方便父组件调用
const resetData = ()=>{
  pageParams.page = 1
  guessList.value = []
  finish.value = false
}

onMounted(()=>{
  getGuessList()
})

// 主动暴露方法
defineExpose({
  getMore:getGuessList,// 获取更多。重命名了。
  resetData, // 重置组件数据。
})
</script>

<style lang="scss" scoped>
.basic-guess{
  padding: 0 20rpx;
 .guess-title{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 36rpx 0 40rpx;
  .guess-text{
    font-size: 32rpx;
    color: #262626;
    display: flex;
    align-items: center;

    &::before,&::after {
      content:'';
      width: 20rpx;
      height: 20rpx;
      background: url(@/static/images/bubble.png);
      background-size: contain;
      display: block;
      margin:0 10rpx;
    }
  }
 } 

 .guess-container{
    display: flex;
    
    flex-wrap: wrap;
    .guess-item{
      width:48%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 20rpx;
      margin:10rpx 1%;
      padding: 20rpx;
      border-radius: 10rpx;

      background-color: #fff;
      image{
        width: 304rpx;
        height: 304rpx;
      }

      .product-name {
        font-size: 26rpx;
        color: #262626;
      }
      .product-price-container{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
         color: #cf4444;
        .price-unit {
       
          font-size: 26rpx;
        }
        .product-price{

        }
      }
    }
 }

 .loading-text{
  font-size: 28rpx;
  color: #666;
  text-align: center;
 }
}
</style>
